{{-- 继承布局模板 --}}
@extends( 'version-2017.layouts.main-layout' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('version-2017/css/production.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>广州便雅悯视光网络科技公司-互动娱乐</title>
@endsection


@section('content')

    <section class="banner interactive">

    </section>


    <!-- 页面导航 -->
    <!-- 页面导航 -->
    <section class="navigation interactive">
        <ul class="navigation-list bym-not-list bym-wrapper clearfix">
            <li class="navigation-list-item">
                <a href="#introduction">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-introduction.png" alt="">
                    </i>
                    <p class="item-name">产品介绍</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#function">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-function.png" alt="">
                    </i>
                    <p class="item-name">产品功能</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#advantage">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-advantage.png" alt="">
                    </i>
                    <p class="item-name">核心优势</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#partner">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-case.png" alt="">
                    </i>
                    <p class="item-name">客户案例</p>
                </a>
            </li>
        </ul>
    </section>


    <!-- 产品介绍 -->
    <section class="introduction interactive" id="introduction">
        <div class="bym-wrapper">
            <div class="introduction-header">
                产品介绍
            </div>
            <div class="introduction-title">
                互动娱乐版
            </div>
            <p class="introduction-desc">
                互动娱乐版是专为眼镜实体零售商推出的一款线下虚拟试戴软件。
                新奇、有趣的虚拟试戴体验激发消费者强烈的购买欲望。
                同时，通过用户主动分享照片到朋友圈，系统可以帮助商家实现品牌免费推广和营销。
            </p>
            <div class="introduction-picture">
                <img src="" alt="">
            </div>
        </div>
    </section>
    <!-- 产品介绍 end -->

    <!-- 功能 -->
    <section class="function interactive" id="function">
        <div class="function-header">
            产品功能
        </div>

        <!-- Swiper -->
        <div class="function-content ">
            <div class="swiper-container" id="interactive_function_swiper">
                <div class="swiper-wrapper">

                    <div class="swiper-slide">

                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">01/03</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/function_conntent_01.jpg" alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">3D虚拟试戴</h4>
                                <p class="item-text-summary">3D动态真人试戴，全面查看眼镜试戴效果</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">01/03</h4>
                                <h6 class="item-text-en">3D VIRTUAL TRY-ON</h6>
                                <h5 class="slide-cotnent-title">3D虚拟试戴</h5>
                                <p class="slide-cotnent-desc">
                                    3D虚拟试戴技术可以让用户在线选购产品时像照镜子一样在线虚拟试穿试戴。
                                    作为眼镜选购一种辅助手段，它可以让用户直接判断眼镜的颜色和款式是否适合自己
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">02/03</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/function_conntent_02.jpg" alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">眼镜试戴拍照</h4>
                                <p class="item-text-summary">在大屏幕前保持动作静止5秒系统即可自动拍照</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">02/03</h4>
                                <h6 class="item-text-en">TAKE PICTURES</h6>
                                <h5 class="slide-cotnent-title">眼镜试戴拍照</h5>
                                <p class="slide-cotnent-desc">
                                    在大屏幕前保持动作静止5秒，系统即可自动拍照。试戴者可以通过关注店家的公众号获取自己的试戴照片
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">03/03</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/function_conntent_03.jpg" alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">试戴照片分享</h4>
                                <p class="item-text-summary">分享到自己的社交圈获取亲朋好友的评价</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">03/03</h4>
                                <h6 class="item-text-en">SHARE</h6>
                                <h5 class="slide-cotnent-title">试戴照片分享</h5>
                                <p class="slide-cotnent-desc">
                                    试戴者可以将试戴照片分享到自己的社交圈获取亲朋好友的评价，眼镜款型的适合与否社交圈将给你最快捷、真实的反馈
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                </div>
            </div>
            <div class="swiper-button-next" id="function_next"></div>
            <div class="swiper-button-prev" id="function_prev"></div>
        </div>
    </section>
    <!-- 功能 END -->




    {{-- 产品优势 --}}
    <section class="advantage interactive" id="advantage">

        <div class="bym-wrapper">
            <div class="advantage-header">
                产品优势
            </div>

            <ul class="advantage-list bym-not-list clearfix">

                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/icon_01.jpg" title="" />
                    </i>
                    <h4 class="item-title">降低开店成本</h4>
                    <p class="item-desc">
                        通过眼镜建模将商品录入系统，构建虚拟货架，有效降低租金成本
                    </p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/icon_02.jpg" title="" />
                    </i>
                    <h4 class="item-title">试戴吸引消费者</h4>
                    <p class="item-desc">
                        为路过的消费者“戴”上眼镜，吸引消费者驻足体验，提升入店客流量
                    </p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/icon_03.jpg" title="" />
                    </i>
                    <h4 class="item-title">试戴分享</h4>
                    <p class="item-desc">
                        试戴拍照和关注微信号引导消费者下载、分享试戴照片，助力门店宣传推广
                    </p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/icon_04.jpg" title="" />
                    </i>
                    <h4 class="item-title">提升用户体验</h4>
                    <p class="item-desc">
                        3D虚拟试戴有助提升消费者的购物体验，增强门店体验，提升门店形象
                    </p>
                </li>

            </ul>
        </div>

    </section>
    <!-- 服务优势 end-->


    <!-- 合作伙伴 -->
    <section class="partner interactive" id="partner">

        <div class="bym-wrapper">
            <div class="partner-header">
                合作伙伴
            </div>
            <div class="partner-content swiper-container" id="partner_content">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/ad_01.jpg" alt="">
                        </div>
                        <p class="slide-name">上海康耐特</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/ad_02.jpg" alt="">
                        </div>
                        <p class="slide-name">东明眼镜</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/ad_03.jpg" alt="">
                        </div>
                        <p class="slide-name">拾吾番</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/ad_04.jpg" alt="">
                        </div>
                        <p class="slide-name">摩尔视立佳</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/ad_05.jpg" alt="">
                        </div>
                        <p class="slide-name">康弘眼镜</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production_interactive/ad_06.jpg" alt="">
                        </div>
                        <p class="slide-name">绿洲眼镜</p>
                    </div>

                </div>
            </div>

        </div>

    </section>
    <!-- 合作伙伴 END -->


@endsection


@section('script')
    <script type="text/javascript" src="{{asset('version-2017/js/production.js')}}"></script>

    <script>
        new Swiper("#partner_content" ,{
            slidesPerView: 4,
            paginationClickable: true,
            loop: true,
//            simulateTouch: true,
            spaceBetween: 20,
            autoplay: 3000,//可选选项，自动滑动
            // centeredSlides : true,
        } );

        //功能
       var functionSwiper =  new Swiper("#interactive_function_swiper" ,{
            slidesPerView: 4,
            paginationClickable: true,
            simulateTouch: false,
           offsetPxBefore : 150,
        } );

       document.getElementById("function_next").addEventListener("click",function(){
           functionSwiper.swipeNext();
       });

       document.getElementById("function_prev").addEventListener("click",function(){
            functionSwiper.swipePrev();
       })

    </script>
@endsection